<template>
	<view>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="基础使用" label-width="550">
				<template slot='header'>
				</template>
				<g-checker-group v-model="value" title='系统主题'>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2"></g-checker>
					<g-checker label="选项3" value="选中值3"></g-checker>
					<g-checker label="选项4" value="选中值4"></g-checker>
					<g-checker label="选项5" value="选中值5"></g-checker>
					<g-checker label="选项6" value="选中值6"></g-checker>
				</g-checker-group>
				<h5>value值:{{value}}</h5>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="多选(multiple)" label-width="550">
				<template slot='header'>
				</template>
				<g-checker-group v-model="value1" title='多选状态' multiple>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2"></g-checker>
					<g-checker label="选项3" value="选中值3"></g-checker>
					<g-checker label="选项4" value="选中值4"></g-checker>
					<g-checker label="选项5" value="选中值5"></g-checker>
					<g-checker label="选项6" value="选中值6"></g-checker>
				</g-checker-group>
				<h5>value值:{{value1}}</h5>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="禁用(g-checker:disabled)" label-width="550">
				<template slot='header'>
				</template>
				<g-checker-group v-model="value" title='禁用样式'>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2" disabled></g-checker>
					<g-checker label="选项3" value="选中值3" disabled></g-checker>
					<g-checker label="选项4" value="选中值4"></g-checker>
					<g-checker label="选项5" value="选中值5"></g-checker>
					<g-checker label="选项6" value="选中值6"></g-checker>
				</g-checker-group>
				<h5>value值:{{value}}</h5>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="可折叠(foldable)" label-width="550">
				<template slot='header'>
				</template>
				<g-checker-group v-model="value" title='可折叠' foldable>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2"></g-checker>
					<g-checker label="选项3" value="选中值3"></g-checker>
					<g-checker label="选项4" value="选中值4"></g-checker>
					<g-checker label="选项5" value="选中值5"></g-checker>
					<g-checker label="选项6" value="选中值6"></g-checker>
				</g-checker-group>
				<h5>value值:{{value}}</h5>
				<h5 style='color: #00EB89'>试试点击右边箭头</h5>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="尺寸(size)" label-width="550">
				<template slot='header'>
				</template>
				<g-checker-group v-model="value" title='mini' size='mini'>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2"></g-checker>
					<g-checker label="选项3" value="选中值3"></g-checker>
				</g-checker-group>
				<g-checker-group v-model="value" title='large' size='large'>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2"></g-checker>
					<g-checker label="选项3" value="选中值3"></g-checker>
				</g-checker-group>
				<h5>value值:{{value}}</h5>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="自定义行(row)" label-width="550">
				<template slot='header'>
				</template>
				<g-checker-group v-model="value" title='自定义行(row:5)' :row='5'>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2"></g-checker>
					<g-checker label="选项3" value="选中值3"></g-checker>
					<g-checker label="选项4" value="选中值4"></g-checker>
					<g-checker label="选项5" value="选中值5"></g-checker>
					<g-checker label="选项6" value="选中值6"></g-checker>
				</g-checker-group>
				<g-checker-group v-model="value" title='自定义行(row:2)' :row='2'>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2"></g-checker>
					<g-checker label="选项3" value="选中值3"></g-checker>
					<g-checker label="选项4" value="选中值4"></g-checker>
					<g-checker label="选项5" value="选中值5"></g-checker>
					<g-checker label="选项6" value="选中值6"></g-checker>
				</g-checker-group>
				<g-checker-group v-model="value" title='自定义行(row:1)' :row='1'>
					<g-checker label="全部" value="all"></g-checker>
					<g-checker label="选项2" value="选中值2"></g-checker>
				</g-checker-group>
				<h5>value值:{{value}}</h5>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'all',
				value1:''
			};
		}
	}
</script>

<style lang="scss">

</style>
